import React, { useEffect, useState } from "react";
import { Alert, message, Button } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { LoginForm, ProFormText } from "@ant-design/pro-components";
import { slideRegister, slideLogin } from "@/services/system.service";
import StorageManager from "@/utils/StorageManager";
import { useNavigate } from "react-router-dom";

export default function Register() {
  const navigate = useNavigate();

  const handleSubmit = async (values) => {
    if (values.password !== values.password2) {
      message.error("两次密码不一致,请修改");
      return;
    }
    // 登录
    const res = await slideRegister({ ...values });
    if (res && res.token) {
      message.success("注册成功");
      setTimeout(() => {
        navigate("/dashboard");
        StorageManager.setSessionStorageSimpleSync("storage-token", res.token);
        StorageManager.setSessionStorageSimpleSync(
          "storage-email",
          values.email
        );
      });
    } else {
      message.error("邮件账号或密码错误");
    }
    return;
  };

  useEffect(() => {}, []);

  return (
    <div
      style={{
        paddingTop: 100,
      }}
    >
      <div>
        <LoginForm
          // logo={<img alt="logo" src="./images/logo.png" />}
          contentStyle={{ marginTop: "36px" }}
          title={"welcome to presto"}
          initialValues={{ autoLogin: true }}
          onFinish={async (values) => await handleSubmit(values)}
          submitter={{
            searchConfig: {
              submitText: "注册",
            },
          }}
        >
          <ProFormText
            name="email"
            fieldProps={{
              size: "large",
              prefix: <UserOutlined />,
            }}
            placeholder="电子邮件"
            rules={[
              { required: true, message: "电子邮件是必填项！" },
              {
                pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                message: "电子邮件格式不正确！",
              },
            ]}
          />
          <ProFormText
            name="name"
            fieldProps={{
              size: "large",
              prefix: <UserOutlined />,
            }}
            placeholder="用户名"
            rules={[{ required: true, message: "不得为空" }]}
          />
          <ProFormText.Password
            name="password"
            placeholder="密码"
            fieldProps={{
              size: "large",
              prefix: <LockOutlined />,
            }}
            rules={[{ required: true, message: "密码是必填项！" }]}
          />
          <ProFormText.Password
            name="password2"
            placeholder="确认密码"
            fieldProps={{
              size: "large",
              prefix: <LockOutlined />,
            }}
            rules={[{ required: true, message: "密码是必填项！" }]}
          />
        </LoginForm>
        <div
          style={{
            margin: "0 auto",
            width: 330,
            textAlign: "right",
            marginTop: 0,
          }}
        >
          <Button
            type="link"
            onClick={() => {
              navigate("/login");
            }}
          >
            去登录
          </Button>
        </div>
      </div>
    </div>
  );
}
